<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
	<!-- Bootstrap -->
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	<!-- 使用simditor插件需要的各种包 -->
	<link rel="stylesheet" type="text/css" href="styles/simditor.css" />
	<script type="text/javascript" src="scripts/jquery.min.js"></script>
	<script type="text/javascript" src="scripts/module.js"></script>
	<script type="text/javascript" src="scripts/hotkeys.js"></script>
	<script type="text/javascript" src="scripts/uploader.js"></script>
	<script type="text/javascript" src="scripts/simditor.js"></script>
	<!-- 使用dropzone插件需要的各种包 -->
    <!-- 该插件已添加初始化图片jq -->
	<script type="text/javascript" src="scripts/dropzone.js"></script>
	<link rel="stylesheet" type="text/css" href="styles/basic.min.css">
	<link rel="stylesheet" type="text/css" href="styles/dropzone.min.css">
	
	<title>添加景点页</title>
	<style type="text/css">
		.container_div{
			width: 95%;
		}
	</style>
</head>
<body>
<div class="container_div">
    <form id="login" class="form-horizontal" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">商品类别</label>
	        <div class="col-sm-4">
	            <select id="first-order" name="category.id" class="form-control">
				  <option>北京</option>
				  <option>上海</option>
				  <option>福建</option>
				  <option>广东</option>
				</select>
			</div>
			<div class="col-sm-4">
				<select id="second-order" name="category.parentId" class="form-control">
				  <option>西城</option>
				  <option>朝阳</option>
				</select>
			</div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="theme">景点主题</label>
            <div class="col-sm-8">
                <label class="radio-inline">
				  <input type="radio" name="theme" value="1">名胜风光
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="2">古镇园林
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="3">水上乐园
				</label>
                <label class="radio-inline">
				  <input type="radio" name="theme" value="4">家庭亲子
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="5">境外精选
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="6">赏花田园
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="7">主题乐园
				</label>
                <label class="radio-inline">
				  <input type="radio" name="theme" value="8">演出表演
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="9">城市生活
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="10">拜佛祈福
				</label>
				<label class="radio-inline">
				  <input type="radio" name="theme" value="11">节假日旅游胜地
				</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="name">景点名称</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="name" name="name" placeholder="Name"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="subtitle">景点副标题</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="subtitle" name="subtitle" placeholder="Subtitle"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="mainImage">主图</label>
            <div class="col-sm-8">
            	<label class="control-label" for="mainImage">默认为子图的第一张图</label>
                <!-- <input type="text" class="form-control" id="mainImage" name="mainImage" placeholder="main image"/> -->
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="subImage">子图</label>
            <div class="col-sm-8">
            	<input type="hidden" name="subImage" id="subImage"/>
            	<!-- 这段代码是展示dropzone.js的精髓 -->
                <div id="subImageDropz" class="dropzone">
                        <div class="am-text-success dz-message">
                            将文件拖拽到此处<br>或点此打开文件管理器选择文件
                        </div>
                        
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="address">具体地址</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="address" name="address" placeholder="address"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="openTime">开放时间</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="openTime" name="openTime" placeholder="open time"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="openTimeDetail">开放时间细节</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="openTimeDetail" name="openTimeDetail" placeholder="open time detail" rows="7"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="specialCrowdPolicy">特殊人群政策</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="specialCrowdPolicy" name="specialCrowdPolicy" value="身高1米以下免票（需由一名成人陪同）；
1-1.4米之间购儿童票 半价；
60周岁（包含60）以上持身份证购老人票 半价。" placeholder="身高1米以下免票（需由一名成人陪同）；
1-1.4米之间购儿童票 半价；
60周岁（包含60）以上持身份证购老人票 半价。" rows="4"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="bookingToRemind">预定提醒</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="bookingToRemind" name="bookingToRemind" value="请自觉遵守公共秩序，保持环境卫生，服从园内工作人员的引导。" placeholder="请自觉遵守公共秩序，保持环境卫生，服从园内工作人员的引导。" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="otherRemind">温馨提醒</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="otherRemind" name="otherRemind" value="为保障游客的游玩安全，凡身高在1.4米（不含1.4米）以下的儿童或70周岁以上的老人必须有一名具有监护能力的成人陪同入园。" placeholder="为保障游客的游玩安全，凡身高在1.4米（不含1.4米）以下的儿童或70周岁以上的老人必须有一名具有监护能力的成人陪同入园。" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="invoiceDescription">发票说明</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="invoiceDescription" name="invoiceDescription" value="如需发票，请致电wetravel客服，4000-999-999" placeholder="如需发票，请致电wetravel客服，4000-999-999" rows="3"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="refundOrChangeInstructions">退改规则</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="refundOrChangeInstructions" name="refundOrChangeInstructions" value="门票预定成功未验证取票，提前一天（以在下单时选定的日期为准）18点之前申请退票，全额退款；逾期收取20%手续费；门票一经验证，不可退改。门票指定出游日起30天内有效，有效期内仅限入园一次。
门票指定出游日起30天内有效，有效期内仅限入园一次。" placeholder="门票预定成功未验证取票，提前一天（以在下单时选定的日期为准）18点之前申请退票，全额退款；逾期收取20%手续费；门票一经验证，不可退改。门票指定出游日起30天内有效，有效期内仅限入园一次。
门票指定出游日起30天内有效，有效期内仅限入园一次。" rows="4"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="specialInformation">特殊信息</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="specialInformation" name="specialInformation" value="年卡说明：年卡为一名成人携带一名1.4米以下儿童，年卡仅限本人使用，仅限标注有效期内使用一次，丢失可凭身份证至窗口补办，购买年卡时需提供身份证，入园时需与身份证对应。" placeholder="年卡说明：年卡为一名成人携带一名1.4米以下儿童，年卡仅限本人使用，仅限标注有效期内使用一次，丢失可凭身份证至窗口补办，购买年卡时需提供身份证，入园时需与身份证对应。" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="introduce">景点介绍</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="introduce" name="introduce" placeholder="Balabala" autofocus></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="traffic">交通信息(公交线路)</label>
            <div class="col-sm-8">
                <textarea class="form-control" id="traffic" name="traffic" placeholder="traffic" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="position">地址坐标</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="position" name="position" placeholder="position"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="status">状态</label>
            <div class="col-sm-8">
                <label class="radio-inline">
				  <input type="radio" name="status" id="inlineRadio1" value="1">在售
				</label>
				<label class="radio-inline">
				  <input type="radio" name="status" id="inlineRadio2" value="2">下架
				</label>
				<label class="radio-inline">
				  <input type="radio" name="status" id="inlineRadio3" value="3">删除
				</label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                <button id="commit" type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>
</div>
</body>
<!-- 初始化simditor -->
<script type="text/javascript">
	//子图队列
	imgArr = new Array();
    fileArr = new Array();
    //dropzone插件初始化：subImage
    Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误
    var myDropzone = new Dropzone("#subImageDropz", {
        url: "/manage/product/richtext_img_upload.do",//文件提交地址
        method:"post",  //也可用put
        paramName:"upload_file", //默认为file
        maxFiles:10,//一次性上传的文件数量上限
        maxFilesize: 2, //文件大小，单位：MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
        addRemoveLinks:true,
        parallelUploads: 10,//一次上传的文件数量
        //previewsContainer:"#preview",//上传图片的预览窗口
        dictDefaultMessage:'拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传10个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
        dictFallbackMessage:"浏览器不受支持",
        dictFileTooBig:"文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init:function(){
            //初始化图片
            this.emit("initimage", "http://img.wetravel.top/522aea5d-bb6d-4a49-afed-0abecc35682d.jpg"); 
            this.on("addedfile", function(file) {
                //上传文件时触发的事件
                //document.querySelector('div .dz-default').style.display = 'none';
            });
            this.on("success",function(file,data){
                //上传成功触发的事件
                console.log('ok');
                console.log(data.success);
                console.log(data.msg);
                console.log(data.file_path);
                imgArr.push(data.file_path);
                fileArr.push(file);
                console.log(imgArr.join(","));
                $("#subImage").val(imgArr.join(","));
                //angular.element(appElement).scope().file_id = data.data.id;
            });
            this.on("error",function (file,data) {
                //上传失败触发的事件
                console.log('fail');
                console.log(data.msg);
                console.log(data.success);
                //var message = '';
                //lavarel框架有一个表单验证，
                //对于ajax请求，JSON 响应会发送一个 422 HTTP 状态码，
                //对应file.accepted的值是false，在这里捕捉表单验证的错误提示
//                if (file.accepted){
//                    $.each(data,function (key,val) {
//                        message = message + val[0] + ';';
//                    })
//                    //控制器层面的错误提示，file.accepted = true的时候；
//                    alert(message);
//                }
            });
            this.on("removedfile",function(file){
                //删除文件时触发的方法
//                var file_id = angular.element(appElement).scope().file_id;
//                if (file_id){
//                    $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
//                        console.log('删除结果:'+data.message);
//                    })
//                }
//                //angular.element(appElement).scope().file_id = 0;
//                document.querySelector('div .dz-default').style.display = 'block';
                console.log('removedfile');
                for (var i=0;i<imgArr.length;i++){
                    if(fileArr[i] == file){
                        fileArr.splice(i,1);
                        imgArr.splice(i,1);
                    }
                }
                console.log(imgArr.join(","));
                $("#subImage").val(imgArr.join(","));
            });
        }
    });
    //simditor插件初始化
	var editor = new Simditor({
	  textarea: $('#introduce'),
	  //optional options
	  placeholder: '',
	  defaultImage: '/resources/images/image.png',
	  params: {},
	  upload: {
	  	url: '/manage/fileupload/richtext_img_upload.do',
    	params:null,
    	fileKey: 'upload_file',
    	connectionCount: 3,
    	leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
	  },
	  tabIndent: true,
	  toolbar: true,
	  toolbarFloat: true,
	  toolbarFloatOffset: 0,
	  toolbarHidden: false,
	  pasteImage: false,
	  cleanPaste: false
	});
</script>
</html>